import React, { Component, Fragment } from 'react';
import { TabBar } from 'antd-mobile'
import { UserOutline, TruckOutline, AppstoreOutline, FileOutline, AppOutline } from 'antd-mobile-icons'
import { withRouter } from 'react-router-dom'
// import PropTypes from 'prop-types'
class Tabbar extends Component {
    state = {
        list: [
            {
                key: '/index/home',
                title: '店铺',
                icon: <AppOutline />,
            },
            {
                key: '/index/cart',
                title: '分类',
                icon: <AppstoreOutline />,
            },
            {
                key: '/index/goods',
                title: '全部商品',
                icon: <FileOutline />,
            },
            {
                key: '/index/shopcart',
                title: '购物车',
                icon: <TruckOutline />,
            },
            {
                key: '/index/mine',
                title: '我的',
                icon: <UserOutline />,
            },
        ]
    }
    routerChange(key) {
        this.props.history.push({ pathname: key, state: { id: "282657" } })
    }


    render() {

        return (
            <Fragment>
                <TabBar onChange={(key) => this.routerChange(key)} activeKey={this.props.history&&this.props.history.location&&this.props.history.location.pathname.substring(0,16)}>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                            )
                        })
                    }
                </TabBar>
            </Fragment>
        );
    }
}


export default withRouter(Tabbar);